<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue Demo</title>
    <script src="./vue.js" type="text/javascript"></script>
    <style type="text/css">
        label{padding: 6px 9px; width: 60px; text-align: left;}
    </style>
</head>
<body>
    <h2>mvvm演示</h2>
    <div id="app1"></div>
    <script type="text/javascript">
        var app1 = new Vue({
            el:'#app1',
            template:`
            <div>
                <div>{{val}}</div>
                <input type="text" v-model="val" />
                <p>{{val}}</p>
            </div>

            `,
            data(){
                return {
                    val:'初始化内容'
                }
            }
        });
    </script>
<!---------------------------------------------------->    
    <h2>虚拟dom演示</h2>
    <div id="app2"></div>
    <script type="text/javascript">
        Vue.component('myrow',{
            props:['row','id'],
            template:'<div>'+
            '<label>{{id}}</label>'+
            '<label>{{row.name}}</label>'+
            '<label>{{row.province}}</label>'+
            '<label>{{row.major}}</label></div>',
            created:function(){
                console.log('myrow: '+this.id+' created!')
            }
        })
        var app2 = new Vue({
            el:'#app2',
            template:`
            <div>
                <myrow v-for="(item,index) in list" :row="item" :id="index" :key="index" /> 
                <button @click="changeData">change data</button>
            </div>
            `,
            data(){
                return {
                    list:[
                        {name:'张三',province:'山东',major:'计算机'},
                        {name:'李四',province:'西安',major:'金融'},
                        {name:'王五',province:'上海',major:'外语'},
                        {name:'赵六',province:'山东',major:'软件工程'}
                    ]
                }
            },
            methods:{
                changeData(){
                    this.list = [
                        {name:'张三',province:'山东',major:'计算机11111'},
                        {name:'李四',province:'西安',major:'金融'},
                        {name:'王五',province:'上海',major:'外语'},
                        {name:'赵六',province:'山东',major:'软件工程'},
                        {name:'陈生',province:'广西',major:'前端'}
                    ]
                }
            }
        });
    </script>

</body>
</html>